<template>
	<view class="idPhone">
		<view class="idPhonePo">
			<image src="../static/bg@2x.png" mode=""></image>
		</view>
		<view class=" idphone-box">
			<view class="idphone-heart" v-if="tempFilePaths==''">
				<image src="../static/wire@2x.png" mode=""></image>
			</view>
			<!-- 上传成功之后的显示区域 -->
			<view class="idphone-heart" style=" " v-if="tempFilePaths!==''">
				<view class="idphone-heart-img2">
					<!-- 原型轮廓 -->
					<view class="" style="width:466rpx;height: 482rpx;  margin: auto;margin-top: 140rpx;">
						<!-- 拍照的人像 -->
						<image :src="tempFilePaths" mode="" style=" "></image>
					</view>
				</view>
			</view>
			<view class="idphone-title">
				为保证打印效果，请确保上传证件照<text class="text-or">轮廓清晰</text>,<text class="text-or">光线充足</text>,用美颜处理效果更佳哦
			</view>
			<view class="idPhonesub-box">
				<!--  -->
				<view class="idPhone-submit flex align-center just-center" @click="idphoneSubmits"
					v-if="tempFilePaths==''">
					上传图片
				</view>
				<view v-else>
					<view class="idPhone-submit flex align-center just-center" @click="idphoneSubmits">
						重新上传
					</view>
					<view class="idPhone-submit flex align-center just-center" @click="idphoneChanges"
						style="margin-top: 40rpx;">
						确认提交
					</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	import {
		login
	} from "@/utils/applet/login.js"
	import {
		choss,
		easyImg
	} from '@/utils/applet/chooseImgPrint.js'
	export default {
		data() {
			return {
				openid: '',
				orderId: '', //订单id
				tempFilePaths: '', //上传成功之后的图片
			}
		},
		onLoad(options) {
			// if (options.q) {
			// var scan_url = decodeURIComponent(options.q);
			// var scan_url = "https://api.xhm2006.com?id='6'&orderId=5B4DD46C6D474FABBEE96300E92FE5EC";
			var scan_url = "https://api.cloudmis.cn?id='10'&orderId=929B893A443441D0B7BE66207C8F985A"
			var reg =
				/[a-z]+:\/\/([A-Za-z0-9.]+)+\?(([a-z])+=([A-Za-z0-9']+)+)+\&([A-Za-z0-9]+)+=([A-Za-z0-9']+)/i;
			var arr = scan_url.match(reg);
			this.orderId = arr[6];
			// 不需要传输speC_ID 
			// }
		},
		onShow() {
			this.openid = uni.getStorageSync('openid');
		},
		methods: {
			spu() {
				var text = [{
					"field": 'SPUId',
					"value": 1015,
				}];
				this.$store.commit("spuid", text);
			},
			// 上传图片
			idphoneSubmits() {
				if (this.openid == '') {
					login().then(res => {
						this.idphones();
						this.spu();
					})
				} else {
					this.idphones();
					this.spu();
				}
			},
			// 本地选择图片api
			idphones() {
				choss(1).then(res => { //调用图片打印封装的api  参数是打印的最大张数 
					console.log(res, 'res0')
					this.tempFilePaths = res[0]; //"http://tmp/T11FLTQNKwnV6fd12e8fac5450cb7ac4b430bba9755b.jpg"]
					console.log(this.tempFilePaths, '00000000000000000000000000')
				})
			},
			// 确认提交
			idphoneChanges() {
				console.log('确认提交')
				const message = [{
					tempFilePaths: this.tempFilePaths, //上传成功之后的图片  
					orderId: this.orderId,
				}]
				uni.redirectTo({
					url: './idPhoneImgSelectSku?messageList=' +
						JSON.stringify(message)
				})
			}
		}
	}
</script>

<style>
	.idphone-heart {
		height: 624rpx;
		width: 500rpx;
		margin: 112rpx auto 64rpx;
	}

	.idphone-heart-img2 {
		height: 624rpx;
		width: 500rpx;
		overflow: hidden;
		box-sizing: border-box;
		background: url('../static/wireno@2x.png');
		background-repeat: no-repeat;
		background-size: 100% 100%;


	}

	.idPhone {
		width: 100%;
		height: 100%;
	}

	.idPhonePo {
		width: 100%;
		height: 100%;
		position: fixed;
		top: 0;
		left: 0;
	}

	.idphone-box {
		width: 100%;
		/* border: 1px solid red; */
		position: absolute;
	}

	.idphone-heart {

		height: 624rpx;
		width: 500rpx;
		margin: 112rpx auto 64rpx;

	}

	.text-or {
		color: #FE5734;
	}

	.idphone-title {
		padding: 0rpx 140rpx 76rpx 130rpx;
		font-size: 12px;
		font-family: PingFang-SC-Medium;
		font-weight: 500;
		color: #CBCBCB;
	}

	.idPhonesub-box {
		padding: 0rpx 32rpx 0rpx 30rpx;
		font-size: 18px;
		font-family: PingFang-SC-Medium;
		font-weight: 500;
		color: #FFFFFF;
	}

	.idPhone-submit {
		width: 100%;
		height: 80rpx;
		background: #FE5734;
		box-shadow: 0px 0px 4px 0px rgba(0, 0, 0, 0.05);
		border-radius: 20px;

	}

	.idPhone-success {
		width: 100%;
		height: 80rpx;
		background: #E5E5E5;
		box-shadow: 0px 0px 4px 0px rgba(0, 0, 0, 0.05);
		border-radius: 20px;
	}
</style>
